<template>
	<BasicContainer :navigators="['一级菜单', '二级菜单', '三级菜单']" :title="'IPTM项目管理'">
		<div style="width:1300px;">
			<a-form layout="inline">
				<a-row style="margin-bottom:15px">
					<a-col :span="6">
						<a-form-item label="项目名称">
							<a-input placeholder="请输入" />
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="项目编码">
							<a-input placeholder="请输入" />
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="是否已关联TAPD项目" :labelCol="{ span: 12 }" :wrapperCol="{ span: 12 }">
							<a-select style="width: 180px" placeholder="请选择">
								<a-select-option value="0">
									是
								</a-select-option>
								<a-select-option value="1">
									否
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>

				<a-row>
					<a-col :span="8">
						<a-button type="primary" style="margin-left:70px">
							<a-icon type="search" />搜索
						</a-button>
						<a-button style="margin-left: 10px;">
							<a-icon type="reload" />重置
						</a-button>
					</a-col>
				</a-row>
			</a-form>
		</div>
		<a-table :columns="columns" style="margin-top: 16px" :locale="locale" :data-source="tableData"
			:pagination="tablePagination" :rowKey="(record, index) => index">
			<template slot="name" slot-scope="text,record">
				<a-tooltip placement="top" v-if="record.name">
					<template slot="title">
						<span>{{ record.name }}</span>
					</template>
					<span style="cursor:default">{{ record.name }}</span>
				</a-tooltip>
				<span v-else-if="!record.name">—</span>
			</template>
			<template slot="tapdProjectId" slot-scope="text,record">
				<a-tooltip placement="top" v-if="record.tapdProjectId">
					<template slot="title">
						<p>{{ record.tapdProjectId }}</p>
					</template>
					<span style="cursor:default">{{ record.tapdProjectId }}</span>
				</a-tooltip>
				<span v-else-if="!record.tapdProjectId">—</span>
			</template>
			<template slot="operation">
				<span style="cursor: pointer;color:#1890FF" @click="onclickRelevanceTapd">关联TAPD项目</span>
			</template>
		</a-table>
		<a-drawer :visible="visible" @close="onClose" title="关联TAPD项目" width="600">
			<a-row style="margin-top:20px">
				<a-form style="width:300px">
					<a-form-item label="TAPD项目名称" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
						<a-input placeholder="请输入" />
					</a-form-item>
				</a-form>
			</a-row>
			<a-row>
				<a-col>
					<a-button type="primary" style="margin-left:100px;">
						<a-icon type="search" />搜索
					</a-button>
					<a-button style="margin-left: 10px;">
						<a-icon type="reload" />重置
					</a-button>
				</a-col>
			</a-row>
			<a-table style="margin-top:30px" :locale="drawerLocale" :rowKey="(record, index) => index"
				:columns="drawerColumns" :data-source="drawerData" :rowSelection="rowSelection"
				:pagination="drawerPagination" @change="drawerChange">
			</a-table>
			<div class="bottom-container" style="background:white">
				<a-button type="primary" class="bottomContainerButton" @click="bottomContainerOk">确定</a-button>
				<a-button type="default" class="bottomContainerButton" @click="bottomContainerCancel">取消</a-button>
			</div>
		</a-drawer>
	</BasicContainer>
</template>
<script>
import EmptyWrap from '@/components/emptyWrap';
import api from '@/api/projectManagement/ItpmProjectManagement';
export default {
	data() {
		return {
			selectedRowKeys: [],//抽屉层的指定选中项的 key 数组
			visible: false,//抽屉弹出层是否可见
			locale: {//默认文案设置，目前包括排序、过滤、空数据文案
				emptyText: <EmptyWrap text="暂无相关数据" type="file-search"></EmptyWrap>
			},
			drawerLocale: {//抽屉表格默认文案设置，目前包括排序、过滤、空数据文案
				emptyText:
					<div class="empty-wrap">
						<a-icon type="file-search" class="iconStyle" />
						<div>暂无相关数据</div>
					</div>
			},
			columns: [//主页table列的配置
				{
					title: "项目名称",
					dataIndex: "name",
					scopedSlots: { customRender: 'name' },
				},
				{
					title: "项目编码",
					dataIndex: "number",
					customRender:(text,record)=>{
						return record.number?record.number:'—';
					},
				},
				{
					title: "创建时间",
					dataIndex: "createTime",
					customRender:(text,record)=>{
						return record.createTime?record.createTime:'—';
					},
				},
				{
					title: "是否已关联TAPD项目",
					dataIndex: "isConnect",
					customRender:(text,record)=>{
						return record.isConnect?record.isConnect:'—';
					},
				},
				{
					title: "已关联TAPD项目",
					dataIndex: "tapdProjectId",
					scopedSlots: { customRender: 'tapdProjectId' },
				},
				{
					title: "操作",
					dataIndex: "operation",
					scopedSlots: { customRender: 'operation' },
				}
			],
			tableData: [//主页表格的数据
				{
					name: '项目1',
					number: "001",
					createTime: 2022,
					isConnect: "是",
					tapdProjectId: "关联项目1",
					operation: "我的操作",
				},
				{
					name: '项目2',
					number: "001",
					createTime: 2022,
					isConnect: "是",
					tapdProjectId: "关联项目1",
					operation: "我的操作",
				},
				{
					name: '项目3',
					number: "001",
					createTime: 2022,
					isConnect: "是",
					tapdProjectId: "关联项目1",
					operation: "我的操作",
				},
				{
					name: '项目4',
					number: "001",
					createTime: 2022,
					isConnect: "是",
					tapdProjectId: "关联项目1",
					operation: "我的操作",
				},
				{
					name: '项目5',
					number: "001",
					createTime: 2022,
					isConnect: "是",
					tapdProjectId: "关联项目1",
					operation: "我的操作",
				},
				{
					name: '项目6',
					number: "001",
					createTime: 2022,
					isConnect: "是",
					tapdProjectId: "关联项目1",
					operation: "我的操作",
				},
				{
					name: '项目7',
					number: "001",
					createTime: 2022,
					isConnect: "是",
					tapdProjectId: "关联项目1",
					operation: "我的操作",
				},
				{
					name: '项目8',
					number: "001",
					createTime: 2022,
					isConnect: "是",
					tapdProjectId: "关联项目1",
					operation: "我的操作",
				},
				{
					name: '项目9',
					number: "001",
					createTime: 2022,
					isConnect: "是",
					tapdProjectId: "关联项目1",
					operation: "我的操作",
				},
				{
					name: '项目10',
					number: "001",
					createTime: 2022,
					isConnect: "是",
					tapdProjectId: "关联项目1",
					operation: "我的操作",
				},
				{
					name: '项目11',
					number: "001",
					createTime: 2022,
					isConnect: "是",
					tapdProjectId: "关联项目1",
					operation: "我的操作",
				},
			],
			tablePagination: {//主页表格的分页器
				showQuickJumper: true,//是否可以快速跳转至某页
				showSizeChanger: true,//是否可以改变 pageSize
			},
			drawerColumns: [//抽屉层table的列配置
				{
					title: "项目名称",
					dataIndex: "name",
				},
			],
			drawerData: [//抽屉层表格的数据
				{
					name: '项目1',
					id: 0,
				},
				{
					name: '项目2',
					id: 1,
				},
				{
					name: '项目3',
					id: 2,
				},
				{
					name: '项目4',
					id: 3,
				},
				{
					name: '项目5',
					id: 4,
				},
				{
					name: '项目6',
					id: 5,
				},
				{
					name: '项目7',
					id: 6,
				},
				{
					name: '项目8',
					id: 7,
				},
				{
					name: '项目9',
					id: 8,
				},
				{
					name: '项目10',
					id: 9,
				},
				{
					name: '项目11',
					id: 10,
				},
			],
			drawerPagination: {//抽屉层表格的分页器
				showQuickJumper: true,//是否可以快速跳转至某页
				showSizeChanger: true,//是否可以改变 pageSize
			}
		};
	},
	created() {
		//this.zwk();
	},
	computed: {
		rowSelection() {//抽屉弹出层的table的单选项的相关配置
			return {
				type: 'radio',
				columnTitle: "选择",
				onChange: (key, row) => {//row代表单选框所选内容
					this.selectedRowKeys = [row[0].id];
				},
				selectedRowKeys: this.selectedRowKeys,
			}
		},
	},
	methods: {
		async zwk() {
			let ddd = await api.postPage({ page: 1 });
			console.log(ddd);
		},
		onclickRelevanceTapd() {//点击“关联TAPD项目”按钮触发
			this.visible = true;
		},
		onClose() {//点击抽屉层或右上角叉或取消按钮的回调
			this.visible = false;
		},
		bottomContainerOk() {//点击抽屉层的确定按钮事件
			this.bottomContainerCancel();
		},
		bottomContainerCancel() {//点击抽屉层的取消按钮事件
			this.selectedRowKeys = [];
			this.visible = false;
		},
		drawerChange() {//监听抽屉弹出层表格页码的变化
			this.selectedRowKeys = [];
		}
	},
}
</script>
<style scoped>
.bottom-container {
	padding: 8px;
	border: 1px solid lightgray;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	align-items: center;
}

.bottomContainerButton {
	float: right;
	margin-right: 20px;
}

.iconStyle {
	font-size: 30px;
}

.empty-wrap {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
</style>